<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<h3>AJAX示例</h3>
<button type="button" onclick="test()">测试原生AJAX</button>
<select id="sel">

</select>
</body>
</html>

<script>
function  test() {
    // 原生AJAX的开发步骤
    // 1. 创建XMLHttpRequest对象
    let xhr = new XMLHttpRequest()
    console.log(xhr)
    // 2. 注册回调函数
    // 当xhr对象的属性readyState值发生变化时，会执行回调函数
    xhr.onreadystatechange = function () {
        // readySate的值：1-4,4表示请求响应结束
        console.log(xhr.readyState)
        // 获得响应数据：作为文本（字符串）
        if(xhr.readyState == 4) {
            console.log(xhr.responseText)
            // 将字符串转换为数组，分割符是,
            let arr = xhr.responseText.split(",")
            // 找到下拉框
            let obj = document.querySelector("#sel")
            // 清空原选项
            obj.length = 0
            console.log(obj)
            for(i=0;i<arr.length;i++) {
                // 创建选项对象
                opt = new Option(arr[i])
                // 将节点加到下拉框中
                obj.append(opt)
            }
        }
    }
    // 3.建立联接, open(请求方法，url，是否是异步)
    // true:表示异步
    xhr.open("GET","a.txt",true)
    // 4.发送请求,GET方法时，send中的数据为空
    // xhr.send(客户端请求数据)
    xhr.send()
}


</script>